<template>
	<div class="login-wrap">
		<div class="w h">
			<mu-appbar color="red" class="w mb-30">
				<mu-button icon slot="left" @click.native="$router.go(-1)">
					<mu-icon value="chevron_left"></mu-icon>
				</mu-button>
				<span slot="default">{{$route.name}}</span>
				<mu-button icon slot="right">
					<!-- <mu-icon value="menu"></mu-icon> -->
				</mu-button>
			</mu-appbar>
			<div class="logo-wrap">
				<img src="@/assets/load_error_3x.png" alt="">
			</div>
			<div class="input-wrap">
				<mu-form :model="loginForm" class="mu-demo-form" :label-position="labelPosition" ref="form">
					<mu-form-item prop="phone" label="手机号码" v-if="type==1" :label-float="true" :rules="rules.login.cellphone" >
						<mu-text-field v-model="loginForm.phone" @keyup.enter="handlerLogin"></mu-text-field>
					</mu-form-item>
					<mu-form-item prop="email" label="邮箱号码" v-if="type==2" :label-float="true">
						<mu-text-field v-model="loginForm.email" @keyup.enter="handlerLogin"></mu-text-field>
					</mu-form-item>
					<mu-form-item prop="password" label="登录密码" :label-float="true" :rules="rules.login.password" >
						<mu-text-field v-model="loginForm.password" :action-icon="visibility ? 'visibility_off' : 'visibility'" :action-click="() => (visibility = !visibility)" :type="visibility ? 'text' : 'password'" @keyup.enter="handlerLogin"></mu-text-field>
					</mu-form-item>
				</mu-form>
				<mu-button color="primary" @click="handlerLogin">登录</mu-button>
				<mu-button color="primary" @click="handlerLogout">退出</mu-button>
			</div>
		</div>
	</div>
</template>

<script>
	let CELLPHONEAPI,EMAILAPI;

	export default{
		data(){
			return{
				type: 1,
				visibility: false,
				labelPosition: 'top',
				loginForm:{
					phone: '',
					email: '',
					password: '',
				}
			}
		},
		mounted(){
			CELLPHONEAPI = this.ApiPath.login.phoneLogin;
			EMAILAPI = this.ApiPath.login.emailLogin
			this.$nextTick(()=>{
				console.log(this.rules)
			})
		},
		methods:{
			handlerLogin(){
				this.$refs.form.validate().then((result) => {
					if(result === true){
						this.$api.get(this.type == 1 ? CELLPHONEAPI : EMAILAPI,this.loginForm,success=>{
							this.$store.commit('_set_profile',success.data);
							this.$nextTick(()=>{
								this.$alert(`${success.data.profile.nickname},欢迎回来~`).then(()=>{
									this.$router.push(this.$route.query.redirect ? this.$route.query.redirect : '/user');
								})
							})
						})
					}
				});
			},
			handlerLogout(){
				this.$api.get(this.ApiPath.logout,{},success=>{
					this.$alert('退出成功').then(()=>{
						this.$store.commit('_set_profile',{});
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-wrap{
		height: 100%;
		display: flex;
		align-items: center;
	}
	.input-wrap{
		padding: 10px;
	}
</style>